<template>
  <div class="home-main-box">
    <div class="head-information">

      <div>
        <div class="avatar"><img :src = "avatar" alt = "avatar"></div>
<!--        <div class="avatar"><img src = "./images/test-avatar.jpeg" alt = "avatar"></div>-->

        <div class="text-list">
          <div>
            <div>用户名称：</div>
            <div>{{ user.userName }}</div>
          </div>
          <div>
            <div>手机号码：</div>
            <div>{{ user.phonenumber }}</div>
          </div>
          <div>
            <div>用户邮箱：</div>
            <div>{{ user.email }}</div>
          </div>
          <div>
            <div>所属部门：</div>
            <div>{{ user.dept.deptName }} / {{ postGroup }}</div>
          </div>
          <div>
            <div>所属角色：</div>
            <div>{{displayRole( roleGroup) }}</div>
          </div>
        </div>
      </div>
      <div>
        <div class="home-page-title">
          <div>我的消息</div>
          <div>更多 <span>></span></div>
        </div>
       <div>
         <div class="home-page-content">
           <div v-for="(v, i) in msg_list" :key="i">
             <div>{{v.content}}</div>
<!--             <div>2024-09-24</div>-->
           </div>
       </div>
        </div>
      </div>
      <div>
        <div class="home-page-title">
          <div>公示栏</div>
          <div>更多 <span>></span></div>
        </div>
        <div>
          <div class="home-page-content">
            <div v-for="(v, i) in comp_list.slice(0,9)" :key="i">
              <div>{{ v.submitterName }}--{{ v.projectName }} -- 审核通过</div>
              <div>{{formatTime(v.createTime)}}</div>
            </div>

          </div>
        </div>
      </div>
    </div>

    <div class="bottom-information">
      <div>
        <div class="home-page-title">
          <div>快捷功能</div>
          <div>更多 <span>></span></div>
        </div>
        <div class="content">
          <div>
            <div><img src = "./images/test-icon.svg" alt = "icon"></div>
            <div>box1</div>
          </div>
          <div>
            <div><img src = "./images/test-icon.svg" alt = "icon"></div>
            <div>box1</div>
          </div>
          <div>
            <div><img src = "./images/test-icon.svg" alt = "icon"></div>
            <div>box1</div>
          </div>
          <div>
            <div><img src = "./images/test-icon.svg" alt = "icon"></div>
            <div>box1</div>
          </div>
          <div>
            <div><img src = "./images/test-icon.svg" alt = "icon"></div>
            <div>box1</div>
          </div>
          <div>
            <div><img src = "./images/test-icon.svg" alt = "icon"></div>
            <div>box1</div>
          </div>
          <div>
            <div><img src = "./images/test-icon.svg" alt = "icon"></div>
            <div>box1</div>
          </div>

        </div>
      </div>
      <div>
        <div class="home-page-title">
          <div>我的代办</div>
          <div>更多 <span>></span></div>
        </div>
        <div class="content">
          <el-table
            :data="listData"
            :border="false"
            height="368"
            style="width: 100%;">
            <el-table-column
              prop="label"
              label="岗位"
              align="center"
              width="180">
              <template v-slot="scope">
                {{cutString(scope.row.label)[1].replace("审核","")}}
              </template>
            </el-table-column>
            <el-table-column
              prop="label"
              label="代办角色"
              align="center"
              width="180">
              <template v-slot="scope">
                {{cutString(scope.row.label)[0]}}
              </template>
            </el-table-column>
            <el-table-column
              prop="label"
              align="center"
              label="申请事项">
              <template v-slot="scope">
                {{cutString(scope.row.label)[1]}}
              </template>
            </el-table-column>
            <el-table-column
              prop="value"
              align="center"
              label="代办数量">
            </el-table-column>
            <el-table-column
              prop="controller"
              align="center"
              label="操作">
              <template v-slot="scope">
              <div class="going" @click="going(scope.row.url)">查看更多</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div style="opacity: 0">
      <jwc-undo    v-hasPermi="['home:xg:undo1']" ref="childOne" />
      <xw-undo   v-hasPermi="['home:xw:undo1']" ref="child2"  />
      <fdy-undo  v-hasPermi="['home:fdy:undo1']" ref="child3"   />
      <stu-undo   v-hasPermi="['home:stu:undo1']" ref="child4"  />
      <fdy-qgzx   v-hasPermi="['home:fdy:qgzx']" ref="child5"  />
      <zdls-qgzx  v-hasPermi="['home:zdls:qgzx']" ref="child6"   />
      <dept-qgzx  v-hasPermi="['home:dept:qgzx']" ref="child7"   />
      <zzb-qgzx   v-hasPermi="['home:zzb:qgzx']" ref="child8"  />
      <zzbld-qgzx  v-hasPermi="['home:zzbld:qgzx']" ref="child9"   />
      <jwc-bottom   v-hasPermi="['home:xg:undo1']" ref="child10"  />
    </div>
  </div>
</template>
<style scoped lang="scss">

.home-main-box{
  padding: 20px;
  background-color: rgb(241,243,243);
  height: calc(100vh - 84px);
}

.head-information{
  display: flex;
  column-gap: 15px;

  >div{
    height: 380px;
    background-color: white;
    border-radius: 15px;
  }
  > div:nth-child(1):after{
    content: '个人中心';
    display: block;
    background-color: rgb(113,173,220);
    color: white;
    font-size: 15px;
    border-radius: 0px 15px 0px 15px;
    padding: 10px 20px;
    position: absolute;
    top:0px;
    right: 0px;
  }
  > div:nth-child(1){
    position: relative;
    padding: 10px;
    box-sizing: border-box;

    background-image: url("./images/people-backgrouand.svg");
    background-size: auto 110%;
    height: 380px;
    width: 33.3%;

    display: flex;
    column-gap: 10px;
    .avatar{
      position: relative;
      top: 75%;
      transform: translateY(-50%);
      img{
        width: 200px;
        height: 200px;
        object-fit: cover;
        border-radius: 15px;
      }
    }

    .text-list{
      position: relative;
      top: 75%;
      transform: translateY(-50%);

      >div{
        padding-left: 10px;
        display: flex;
        font-size: 14px;

        margin-bottom: 25px;

        >div:nth-child(1){
          color: rgba(255, 255, 255,0.80);
          line-height: 20px;
        }
        >div:nth-child(2){
          padding-left: 10px;
          color: rgb(255, 255, 255);
          line-height: 20px;

        }
      }
    }
  }

  .home-page-content{
    margin-top:16px;
    padding: 0px 20px;
    box-sizing: border-box;
   >div{
     display: flex;
     justify-content: space-between;
     width: 100%;
     >div:nth-child(1){
        width: 75%;
       height:30px;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
      line-height: 30px;

     }
     >div:nth-child(2){
       width: 25%;
       text-align: right;
       line-height: 30px;
     }
   }
  }
  // head center
  > div:nth-child(2){
    box-sizing: border-box;
    width: 33.3%;
    >div:nth-child(1){
      border-bottom: solid 1px #d0d0d0;
    }
  }
  > div:nth-child(3){
    box-sizing: border-box;
    width: 33.3%;
    padding-bottom: 10px;
    >div:nth-child(1){
      border-bottom: solid 1px #d0d0d0;
    }
  }
}

.bottom-information{
  margin-top: 15px;
  display: flex;
  column-gap: 15px;

  min-height: 46vh;
  >div{
    border-radius: 15px;
    background-color: white;
    box-sizing: border-box;
  }
  // bottom content
  >div:nth-child(1){
    width: 32.8%;

    .content{
      padding: 20px;
      border-top: solid 1px #d0d0d0;
      width: 100%;
      box-sizing: border-box;
      display: flex;
      column-gap: 60px;
      justify-content: start;
      flex-wrap: wrap;
      >div{
        width: 50px;
        margin-top: 15px;
        >div:nth-child(1){
          img{
            width: 50px;
            height: 50px;
          }
        }
        >div:nth-child(2){
          margin-top: 5px;
          text-align: center;
        }
      }
    }

  }
  >div:nth-child(2){
    width: 48.3%;
    flex: 1;
    box-sizing: border-box;
    .content{
      border-top: solid 1px #d0d0d0;
      height: 100%;
    }
  }
}


.home-page-title{
  display: flex;
  justify-content: space-between;
  padding: 20px;
  >div:nth-child(1){
   font-size: 17px;
    font-weight: bold;
    position: relative;
    z-index: 3;
  }
  >div:nth-child(2){
    padding-top: 5px;
    color: #757575;
    font-size: 15px;
    span{
      display: inline-block;
      padding-left: 5px;
    }
  }
  >div:nth-child(1):after{
    content: ' ';
    display: block;
    background: linear-gradient(to right, rgb(163, 201, 233), rgb(50, 137, 205));
    height: 6px;
    width: 100%;
    position: absolute;
    top: 17px;
    z-index: -1;
  }
}

.going{
  cursor: pointer;
  transition: all 0.3s;
}
.going:hover{
  opacity: 0.8;
}
</style>

<script>
import { getUserProfile } from "@/api/system/user";
import { listMsg } from "@/api/stuCQS/process-center/msg";
import { getCompleted } from "@/api/stuCQS/process-center/auditDetails";
import store from "@/store";
import { VueCropper } from "vue-cropper";
import { uploadAvatar } from "@/api/system/user";
import { debounce } from '@/utils'

import ZzbldQgzx from "./comps/zzbld-qgzx.vue";
import ZzbQgzx from "./comps/zzb-qgzx.vue";
import ZdlsQgzx from "./comps/zdls-qgzx.vue";
import FdyQgzx from "./comps/fdy-qgzx.vue";
import DeptQgzx from "./comps/dept-qgzx.vue";

import jwcBottom from "./comps/jwc-bottom.vue";

import JwcUndo from "./comps/jwc-undo.vue";
import XwUndo from "./comps/xw-undo.vue";
import FdyUndo from "./comps/fdy-undo.vue";
import StuUndo from "./comps/stu-undo.vue";
import router from "../../router";

export default {
  components: {
    JwcUndo, XwUndo, FdyUndo, StuUndo,
    jwcBottom,
    ZzbldQgzx, ZzbQgzx, ZdlsQgzx, FdyQgzx, DeptQgzx
  },
  created() {
    this.getUser();
    this.getCompleted();
    this.listMyMsg();

    this.avatar = store.getters.avatar;
   setTimeout(()=>{
     const listDataTask = [
       ...this.$refs.childOne.taskList,
       ...this.$refs.child2.taskList,
       ...this.$refs.child3.taskList,
       ...this.$refs.child4.taskList,
       ...this.$refs.child5.taskList,
       ...this.$refs.child6.taskList,
       ...this.$refs.child7.taskList,
       ...this.$refs.child8.taskList,
       ...this.$refs.child9.taskList,
     ]
     this.listData = listDataTask.filter(item=>{
       return this.cutString(item.label)[0] === this.displayRole(this.roleGroup);
     })
   },500)
  },
  methods: {
    going(url){
      this.$router.push(url);
    },
    cutString(text){
      return text.split('·')
    },
    formatTime(date){
        const dateTime = new Date(date)
        return new Intl.DateTimeFormat('en-CA').format(dateTime); // 'en-CA' 默认格式是 yyyy-mm-dd
    },
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data;
        this.roleGroup = response.roleGroup;
        this.postGroup = response.postGroup;
      });
    },
    async getCompleted() {
      let res = await getCompleted();
      if (res.rows.length > 0) {
        this.have_comp = true;
        this.comp_list = [...res.rows];
      }
    },
    displayRole(text) {
      if (text.includes("教职工")) {
        return "教职工";
      } else if (text.includes("学生")) {
        return "学生";
      } else {
        return text;
      }
    },
    async listMyMsg() {
      let res = await listMsg();
      if (res.rows.length > 0) {
        this.have_msg = true;
        this.msg_list = [...res.rows];
      }
    },


  },


  data() {
    return {
      listData:[],
      user: {},
      roleGroup: {},
      postGroup: {},

      comp_list: [],
      msg_list: [],

      avatar: null,

      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  }
}

</script>
